<!DOCTYPE html>
<html lang="en">

	<head>
		<title>重庆农气-运行监控子系统</title>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<link rel="stylesheet" href="css/bootstrap-responsive.min.css" />
		<link rel="stylesheet" href="css/fullcalendar.css" />
		<link rel="stylesheet" href="css/matrix-style.css" />
		<link rel="stylesheet" href="css/matrix-media.css" />
		<link href="font-awesome/css/font-awesome.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/jquery.gritter.css" />
		<link rel="stylesheet" href="css/index.css" />
		<style>
			body {
				line-height: inherit;
			}
			
			.align-center {
				text-align: center;
			}
		</style>
	</head>

	<body class="container" onload="init()">

		<!--Header-part-->
		<div class="header">
			<div class="top"></div>
			<ul class="nav">
				<li><a href="index.html" class="click">首页</a></li>
				<li><a href="temp.html">气温监测</a></li>
				<li><a href="precipitation.html">降水监测</a></li>
				<li><a href="soil.html">墒情监测</a></li>
				<li><a href="product.html">产品统计</a></li>
				<li><a href="vip.html">大户分布</a></li>
				<li><a href="farmland.html" class="click">农田分布</a></li>
				<li><a href="agrinfo.html">农情分布</a></li>
				<li><a href="expert.html">专家风采</a></li>
				<li><a href="state.html">运行状态</a></li>
			</ul>
			<div class="login">
				<a href="javascript:void(0);" id="login">登录</a>
				<a href="javascript:void(0);" id="exit">退出登录</a>
			</div>
		</div>

		<!--main-container-part-->
		<div id="content">
			<!--breadcrumbs-->
			<div id="content-header">
				<div id="breadcrumb"> <a href="index.html" title="Go to Home" class="tip-bottom"><i class="icon-home"></i> 农田分布</a></div>
			</div>
			<div class="row-fluid">
				<div class="span12">
					<div id="map" style="height: 600px; width: 100%;margin: 0;padding: 0;border: 0;">
					</div>
				</div>

				<div class="row-fluid">
					<div id="footer" class="span12"> 2016 &copy; 重庆市气象局
						<a href="#"></a>
					</div>
				</div>

				<!--end-Footer-part-->
				<script src="js/my/framlandData.js"></script>
				<script src="js/excanvas.min.js"></script>
				<script src="js/jquery.min.js"></script>
				<script src="js/jquery.ui.custom.js"></script>
				<script src="js/bootstrap.min.js"></script>
				<script src="js/matrix.js"></script>
				<script src="libs/SuperMap.Include.js"></script>
				<script src="js/monitor.js"></script>
				<script type="text/javascript">
					var map, baseLayer, dragPan, markers, framedCloud, p;

					function init() {
						var resolutions = [9783.93962049996, 4891.96981024998, 2445.98490512499, 1222.992452562495, 611.4962262813797, 305.74811314055756, 152.87405657041106, 76.43702828507324, 38.21851414253662, 19.10925707126831, 9.554628535634155, 4.77731426794937, 2.388657133974685];
						var matrixIds = new Array(13);
						for (var i = 0; i < 13; i++) {
							matrixIds[i] = {
								identifier: i
							};
						};
						//初始化地图拖拽控件类
						dragPan = new SuperMap.Control.DragPan();
						//当该属性为true，拖拽地图时，鼠标移动到地图可视区域外依然有效。默认为false
						dragPan.documentDrag = true;
						//设置是否使用拖拽动画。默认为false，不使用动画
						dragPan.enableKinetic = true;
						//执行动画的间隔，默认为10，单位是毫秒
						dragPan.kineticInterval = 20;
						map = new SuperMap.Map("map", {
							controls: [
								dragPan,
								new SuperMap.Control.Zoom(), new SuperMap.Control.Navigation()
							],
							maxExtent: new SuperMap.Bounds(8176078.237500001, 379653.95419999957, 15039542.061499998, 7087813.645199999)
						});
						//底图图层
						baseLayer = new SuperMap.Layer.WMTS({
							name: "Maps_StreetMap",
							url: "http://172.24.186.81:6080/arcgis/rest/services/Maps/StreetMap/MapServer/wmts",
							layer: "Maps_StreetMap",
							style: "default",
							matrixIds: matrixIds,
							matrixSet: "default028mm",
							format: "image/jpg",
							resolutions: resolutions, //分辨率数组
							tileOrigin: new SuperMap.LonLat(-20037508.342787, 20037508.342787), //瓦片矩阵左上角
							requestEncoding: "KVP"
						});
						map.addLayers([baseLayer]);
						map.setCenter(new SuperMap.LonLat(11997336, 3544032), "4");
						dragPan.activate();
						//----------------------
						//初始化标记图层类
						markers = new SuperMap.Layer.Markers("Markers");
						size = new SuperMap.Size(16, 16);
						offset = new SuperMap.Pixel(-(size.w / 2), -size.h);
						icon = new SuperMap.Icon('theme/point.ico', size, offset);
						for (var i = 0; i < data.length; i++) {
							p = lonLat2WebMercator(data[i]["longitude"], data[i]["latitude"]);
							//初始化标记覆盖物类
							var marker = new SuperMap.Marker(new SuperMap.LonLat(p.x, p.y), icon);
							//添加覆盖物到标记图层
							markers.addMarker(marker);
							//注册 click 事件,触发 mouseClickHandler()方法
							marker.events.on({
								"click": mouseClickHandler,
								"touchstart": mouseClickHandler, //假如要在移动端的浏览器也实现点击弹框，则在注册touch类事件
								"scope": data[i]
							});
						} //------------
						map.addLayers([markers]);
					}
					var infowin = null;
					//定义mouseClickHandler函数，触发click事件会调用此函数
					function mouseClickHandler() {
						var data = this;
						var p = lonLat2WebMercator(data["longitude"], data["latitude"]);
						var lonlat = new SuperMap.LonLat(p.x, p.y)
						closeInfoWin();
						var contentHTML = "<div  style='width: 250px; height: 100px;'><div style='margin-top:3px ;' class='label label-info'> 描述： </div> ";
						contentHTML += data["descript"];
						contentHTML += "</br> <div style='margin-top:3px ;' class='label label-info'> 指标：  </div>";
						contentHTML += data["code"];
						contentHTML += "</br> <div style='margin-top:3px ;' class='label label-info'> 电话：  </div>";
						contentHTML += 123456789101;
						contentHTML += "</br><div style='margin-top:3px ;' class='label label-info'> 区县：  </div>";
						contentHTML += "重庆";
						contentHTML += "</div> "
							//初始化FramedCloud类
						framedCloud = new SuperMap.Popup.FramedCloud(
							"chicken",
							lonlat,
							null,
							contentHTML,
							null,
							true,
							null,
							true
						);
						infowin = framedCloud;
						map.addPopup(framedCloud);
					}

					function closeInfoWin() {
						if (infowin) {
							try {
								infowin.hide();
								infowin.destroy();
							} catch (e) {}
						}
					}
					//经纬度转Web墨卡托  
					function lonLat2WebMercator(a, b) {
						var mercator = new po();
						var x = a * 20037508.34 / 180;
						var y = Math.log(Math.tan((90 + b) * Math.PI / 360)) / (Math.PI / 180);
						y = y * 20037508.34 / 180;
						mercator.x = x;
						mercator.y = y;
						return mercator;
					}

					function po() {
						po.prototype.x = 0;
						po.prototype.y = 0;
					}
				</script>
	</body>

</html>